<template>
  <Grid :col="2">
    <GridItem>
      <div class="home">
        输入的内容{{ text }}
        <br>
        <input type="text" v-model="text">
        <!--    <input type="text" :value="text" @input="inputChange">-->
      </div>
    </GridItem>
    <GridItem>
      <input type="radio" id="first" v-model="radioValue" value="first">
      <label for="first">first</label>
      <br>
      <input type="radio" id="second" v-model="radioValue" value="second">
      <label for="second">second</label>
      <br>
      <input type="checkbox" v-model="toggle" id="ffd" true-value="yes" false-value="no" />
      <label for="ffd">{{ toggle }}</label>
    </GridItem>
    <GridItem>
      <InputNumber :max="5" :min="0" @on-change="numberOnChange" v-model="inputNumber" />
      <Child1 :rate="inputNumber"></Child1>
    </GridItem>
    <GridItem>
      <Child3 v-model:title.hyphen="name"></Child3>
      {{ name }}
    </GridItem>
    <GridItem>
      <Child4>
        <template #title="{ grid }">
          container---{{ grid }}
        </template>
      </Child4>
    </GridItem>
  </Grid>

</template>

<script>
import { ref, onMounted, provide } from "vue";
import Child1 from "@/components/child1.vue";
import Child3 from "@/components/child3.vue";
import Child4 from "@/components/child4.vue";
import useCtx from "@/hooks/useCtx";

function useOnMounted() {
  onMounted(() => {
    console.log("the instance is mounted");
  });
}

export default {
  components: {
    Child1,
    Child4,
    Child3
  },
  setup() {
    const _this = useCtx();
    const text = ref("");
    const radioValue = ref("");
    const toggle = ref("yes");
    const inputNumber = ref(0);
    const name = ref("i am sober");

    useOnMounted();

    function inputChange(e) {
      text.value = e.target.value;
    }

    provide("input-number", inputNumber);

    function numberOnChange() {
      _this.$Message.success("success!");
    }

    return {
      text,
      radioValue,
      toggle,
      inputNumber,
      name,
      numberOnChange,
      inputChange
    };
  }
};
</script>
